<template>
    <div>
        <Col span="24">
        <Button type="success" style="margin-bottom: 5px" @click="add()">添加</Button>
        <Button type="primary" style="margin-bottom: 5px;margin-left: 5px" @click="init()">搜索</Button>
        </Col>
        <Table border :columns="columns" :data="data">
        <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">修改</Button>
            <Button type="error" size="small" @click="del(row)">删除</Button>
        </template>
        </Table>
        <Page :total="searchInfo.totalnum" class="page_style" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total show-elevator show-sizer @on-page-size-change="changePagesize"/>
        <Drawer
          placement="right"
          width="70%"
          v-model="info.isshow"
          title="添加模板"
          :mask-closable="false"
          @on-ok="saveok">
        <Form :model="forminfo" label-position="left" :label-width="100" style="margin-left:50px" class="forma">
            <FormItem label="问卷标题">
                <div class="add-title-wrapper">
                  <input maxlength="40" class="info-title" type="text" v-model="forminfo.wenjuan_title" placeholder="请在此填写问卷标题">
                </div>
                <!-- <Input maxlength="40" placeholder="请在此填写问卷标题" v-model="forminfo.wenjuan_title" class="info-title" style="font-size: 1.2em"></Input> -->
                <!-- <div class="info-change-list">
                    <div class="listiconshow">
                    <label>
                        <input
                            type="text"
                            maxlength="40"
                            placeholder="请在此填写问卷标题"
                            class="change-list"
                            v-model="forminfo.wenjuan_title"
                        >
                    </label>
                    </div>
                </div> -->
            </FormItem>
            <FormItem label="问卷人群">
                <div class="add-title-wrapper">
                  <input maxlength="20" placeholder="请在此填写问卷人群" show-word-limit v-model="forminfo.wenjuan_object" class="info-title"></input>
                </div>
            </FormItem>
            <FormItem label="问卷内容">
                <div class="info-change-list">
                    <div class="listiconshow">
                        <Input
                            type="textarea"
                            class="info-title"
                            placeholder="请在此填写问卷内容"
                            v-model="forminfo.wenjuan_content"
                            maxlength="200"
                            show-word-limit
                            style="width: 90%;border-color:#c7c9ce;"
                        >
                        </Input>
                    </div>
                </div>
            </FormItem>
            <FormItem class="add-info-warrper" v-for="(item,index) of single" :label="item.laber" :key="index">
                <div class="add-title-wrapper">
                  <input class="info-title" type="text" v-model="item.title" placeholder="请在此填写题目">
                </div>
                <div class="info-icon-show">
                <div class="info-icon">
                    <Tooltip content="上移题目">
                    <div @click='UpChangeSingleList(item.id)'><Icon type="md-arrow-up" size="22"/></div>
                    </Tooltip>
                    <Tooltip content="下移题目">
                    <div @click='DownChangeSingleList(item.id)'><Icon type="md-arrow-down" size="22" /></div>
                    </Tooltip>
                    <!-- <div title="复用" @click="CopyChangeSingleList(item.id)"><Icon type="md-copy" size="22" /></div> -->
                    <Tooltip content="删除题目">
                    <div @click='RemoveChangeSingleList(item.id)'><Icon type="md-trash" size="22" /></div>
                    </Tooltip>
                </div>
                </div>
                <div class="info-change-list">
                    <div class="listiconshow" v-for="(list,index) of item.changelist" :key="index">
                    <label for="list.inid" v-if="item.type==0">
                        <input
                            v-model="list.value"
                            type="text"
                            placeholder="请在此填写选项"
                            class="change-list"
                            :disabled="list.value === '其他'"
                        >
                        <Tooltip content="设为其他选项，由用户手动录入。">
                           <span class="iconfont listicon" @click.prevent.stop="SetQita(index,item.changelist)"><Icon type="ios-create" /></span>
                        </Tooltip>
                        <Tooltip content="上移选项">
                        <span class="iconfont listicon" @click.prevent.stop="HandleClickUp(index,item.changelist)"><Icon type="md-arrow-up" /></span>
                        </Tooltip>
                        <Tooltip content="下移选项">
                        <span class="iconfont listicon" @click.prevent.stop="HandleClickDown(index,item.changelist)"><Icon type="md-arrow-down" /></span>
                        </Tooltip>
                        <Tooltip content="删除选项">
                        <span class="iconfont listicon" @click.prevent.stop="HandleClickRemoveList(index,item.changelist)"><Icon type="md-trash" /></span>
                        </Tooltip>
                    </label>
                    <label for="list.inid" class="listlabel" v-else-if="item.type==1">
                        <input
                            v-model="list.value"
                            type="text"
                            placeholder="请在此填写选项"
                            class="change-list"
                        >
                        <Tooltip content="上移选项">
                        <span class="iconfont listicon" @click.prevent.stop="HandleClickUp(index,item.changelist)"><Icon type="md-arrow-up" /></span>
                        </Tooltip>
                        <Tooltip content="下移选项">
                        <span class="iconfont listicon" @click.prevent.stop="HandleClickDown(index,item.changelist)"><Icon type="md-arrow-down" /></span>
                        </Tooltip>
                        <Tooltip content="删除选项">
                        <span class="iconfont listicon" @click.prevent.stop="HandleClickRemoveList(index,item.changelist)"><Icon type="md-trash" /></span>
                        </Tooltip>
                    </label>
                    <div v-else-if="item.type==2">
                        <Input
                        type="textarea"
                        class="info-title"
                        placeholder="此位置为用户填写，无需填写。"
                        disabled
                        v-model="list.textareavalue"
                        maxlength="200"
                        show-word-limit
                        style="width: 90%;"
                        >
                        </Input>
                    </div>
                    </div>
                    <Button class="add-changelist-button" @click="HandleClickAddList(item.changelist)" v-if="item.type !== 2 && item.type !== '2'" type="dashed" ghost>添加选项</Button>
                    <!-- <div class="add-changelist-button" @click="HandleClickAddList(item.changelist)">
                    </div> -->
                </div>
            </FormItem>
            <div class="select-wrapper">
                <div class="add-explain">
                    添加问题
                </div>
                <div class="select-button" @click="changetype">
                    单选
                </div>
                <div class="select-button" @click="changetype">
                    多选
                </div>
                <div class="select-button" @click="changetype">
                    文本
                </div>
            </div>
            <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="info.isshow = false">取消</Button>
                <Button type="primary" @click="saveok()">保存</Button>
            </div>
        </Form>
      </Drawer>
    </div>
</template>

<script>
import { findWenjuanList, deleteWenjuan, saveWenjuan } from '@/api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      tabIndex: 'zx',
      searchInfo: {
        currentPageNo: 1,
        currentPageSize: 10,
        loading1: true,
        totalnum: 0
      },
      columns: [
        {
          title: '问卷标题',
          key: 'wenjuan_title'
        },
        {
          title: '问卷人群',
          key: 'wenjuan_object'
        },
        {
          title: '问卷编号',
          key: 'wenjuan_code'
        },
        {
          title: '创建时间',
          key: 'create_time'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data: [],
      info: {
        isshow: false
      },
      forminfo: {},
      single: [],
      singleid: 1,
      singletitle: '题目',
      listtype: '',
      timer: null,
      infolistid: 2,
      infolistval: '选项',
      checked: ''
    }
  },
  methods: {
    init () {
      console.log('====')
      var params = {
        pageSize: this.searchInfo.currentPageSize,
        pageNo: this.searchInfo.currentPageNo
      }
      findWenjuanList(params).then(res => {
        if (res.data.errcode === 0) {
          this.data = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
      })
    },
    changePagesize (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.searchInfo.currentPageNo = pageNo
      this.init()
    },
    add () {
      this.forminfo = {}
      this.single = []
      this.info.isshow = true
      this.info.isedit = false
    },
    edit (row) {
      this.forminfo = row.forminfo
      this.single = row.single
      console.log(this.single, '===this.singlethis.singlethis.singlethis.single')
      this.info.isshow = true
      this.info.isedit = true
    },
    del (row) {
      if (confirm('确定删除吗')) {
        deleteWenjuan(row).then(res => {
          console.log(res.data)
          if (res.data.errcode === 0) {
            this.init()
            this.$Notice.success({ title: '成功' })
          } else {
            this.$Notice.error({ title: res.data.errmsg })
          }
        })
      }
    },
    saveok () {
      console.log(this.forminfo, 'aaaa')
      let params = {
        forminfo: this.forminfo,
        single: this.single
      }
      if (!this.forminfo.wenjuan_title) {
        this.$Notice.error({ title: '请在此填写问卷标题' })
        return
      }
      if (!this.forminfo.wenjuan_object) {
        this.$Notice.error({ title: '请在此填写问卷人群' })
        return
      }
      if (!this.forminfo.wenjuan_content) {
        this.$Notice.error({ title: '请在此填写问卷内容' })
        return
      }
      if (this.single.length < 1) {
        this.$Notice.error({ title: '请在此填加问卷题目' })
        return
      }
      this.info.isshow = false
      //   this.forminfo = {}
      //   this.single = []
      console.log(params, '请求的入参哦~~~')
      saveWenjuan(params).then(res => {
        console.log(res.data)
        if (res.data.errcode === 0) {
          this.init()
          this.forminfo = {}
          this.single = []
          this.$Notice.success({ title: '成功' })
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
      })
    },
    changetype (e) {
      if (e.target.innerText.indexOf('单') > -1) {
        this.listtype = 0
        this.CreateChangeSingleList('单选')
      } else if (e.target.innerText.indexOf('多') > -1) {
        this.listtype = 1
        this.CreateChangeSingleList('多选')
      } else {
        this.listtype = 2
        this.CreateChangeTextareaList()
      }
    },
    //  整理排序
    sorted () {
      if (this.single.length <= 0) {
        this.singleid = '1'
      } else if (!(this.single.length === this.singleid)) {
        this.singleid = this.single.length + 1
      }
    },
    //  创建一个新单/多选题
    CreateChangeSingleList (laber) {
      this.sorted()
      let changelist = [
        { inid: '0', value: '', check: false },
        { inid: '1', value: '', check: false }
      ]
      this.single.push({
        id: this.singleid++,
        title: '',
        type: this.listtype,
        changelist: changelist,
        laber: laber
      })
    },
    // 判断文本题是否必填
    HandleChecked (e) {
      if (e.target.checked) {
        this.checked = '必填'
      }
    },
    // 创建一个新文本选题
    CreateChangeTextareaList () {
      this.sorted()
      let changelist = [
        { textareavalue: '', necessary: this.checked, textprompt: false }
      ]
      this.single.push({
        id: this.singleid++,
        title: '',
        type: this.listtype,
        changelist: changelist,
        laber: '文本'
      })
    },
    // 删除指定选题
    RemoveChangeSingleList (id) {
      if (confirm('确定删除吗')) {
        this.single.splice(id, 1)
      }
    },
    // 指定某个选题选项上移
    UpChangeSingleList (id) {
      if (id === 0) {
        return false
      } else {
        this.single.splice(id - 1, 0, this.single[id])
        this.single.splice(id + 1, 1)
      }
    },
    // 指定某个选题选项下移
    DownChangeSingleList (id) {
      if (id >= 10 || id === this.single.length - 1) {
        return false
      } else {
        this.single.splice(id + 2, 0, this.single[id])
        this.single.splice(id, 1)
      }
    },
    // 复用某个选题
    CopyChangeSingleList (id) {
      let index = this.single[id]
      index = Object.assign({}, index) // 不这样写会无限循环，即便如此id还是重复了
      this.single.splice(id + 1, 0, index)
    },
    // 创建内部选项
    HandleClickAddList (list) {
      if (!(list.length === this.infolistid)) {
        this.infolistid = list.length
      }
      if (list.length < 20) {
        list.push({
          inid: this.infolistid++,
          value: ''
        })
      } else {
        alert('最多只能创建20个选项')
      }
    },
    // 删除指定内部选项
    HandleClickRemoveList (index, list) {
      list.splice(index, 1)
    },
    SetQita (index1, list) {
      console.log(list[index1], '====')
      list.forEach((val, index2) => {
        if (index2 === index1) {
          val.value = '其他'
        } else if (val.value === '其他') {
          val.value = '选项'
        } else {
        }
      })
    },
    // 内部选项上移
    HandleClickUp (index, list) {
      if (index === 0) {
        return false
      } else {
        list.splice(index - 1, 0, list[index])
        list.splice(index + 1, 1)
      }
    },
    // 内部选项下移
    HandleClickDown (index, list) {
      if (index >= 10 || index === list.length - 1) {
        return false
      } else {
        list.splice(index + 2, 0, list[index])
        list.splice(index, 1)
      }
    }
  },
  watch: {
    //  侦听single数组
    single: {
      handler () {
        if (this.timer) {
          //  提升性能
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.single.forEach((val, index) => {
            val.id = index
          })
          let single = 'single' + this.$route.params.id
          localStorage.setItem(single, JSON.stringify(this.single))
        }, 100)
      },
      //  开启深度监听
      deep: true,
      immediate: true
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped>
.add-con{
    box-sizing: border-box;
    padding:10px 0;
    border-top:1px solid #e1e1e1;
    border-bottom:1px solid #e1e1e1;
    overflow: hidden;
}
.add-explain{
    height: 20px;
    line-height: 20px;
    font-size: 1.2em;
    margin-right:2em;
}
@media screen and (max-width:500px){
        .add-explain{
            display: none;
        }
    }
.add-explain>span{
    vertical-align: middle;
    font-size: 1.2em;
}
.select-wrapper{
    background: #fff;
    text-align:center;
    display: flex;
    justify-content: center;
    padding:10px 0;
    border:1px solid #c7c9ce;
}
.select-wrapper:hover{
    background: #e1e1e1;
}
.select-button{
    border:1px solid black;
    border-radius: 5px;
    width: 8%;
    min-width:70px;
    height: 20px;
    line-height: 20px;
    margin-right:5px;
}
.select-button:hover{
    background:#31383e;
    color: #fff;
    cursor: pointer;
}
.add-info-warrper{
    padding:10px;
    margin-bottom: 5px;
    min-width:350px;
    min-height:180px;
}
.add-con .add-info-warrper:hover{
    box-shadow: 1px 1px 2px 2px #eee;
}
.add-title-wrapper{
    font-size: 1.2em;
    margin-bottom:5px;
}
.add-title-wrapper .info-title{
    box-sizing: border-box;
    width: 90%;
    height: 30px;
    padding:3px 5px;
    border:1px solid ;
    border-color:#c7c9ce;
    border-radius: 3px;
}
.add-title-wrapper .info-title:hover{
    border:1px solid #0192db;
}
.info-icon-show{
    width:2em;
    vertical-align:top;
    display: inline-block;
}
.info-icon{
    width:2em;
    display: none;
    vertical-align:top;
}
.add-info-warrper:hover .info-icon{
    display: inline-block;
}
.add-info-icon{
    padding-bottom: 15px;
    width:27px;
    font-size: 18px;
    cursor: pointer;
}
.add-info-icon:hover{
    color:#018fe5 ;
}
.add-info-warrper .info-change-list{
    display: inline-block;
    width:96%;

}
.info-change-list .change-list{
    box-sizing: border-box;
    width:90%;
    padding:0 3px;
    border:1px solid ;
    border-radius: 3px;
    border-color:#c7c9ce;
    margin-bottom:3px;
    height: 30px;
}
.info-change-list .change-list:hover{
    border:1px solid #0192db;
}
.info-change-list .add-changelist-button{
    margin-top: 5px;
    color:rgb(28, 52, 189);
    cursor: pointer;
}
.listicon{
    color: #018fe5;
    display:none;
    vertical-align: middle;
    text-align: right;
    font-size:1.3em;
    margin-left:2px;
    cursor:pointer;
}
.listiconshow:hover .listicon{
    display: inline-block;
}
.textarea{
    border: 1px solid ;
    width:90%;
    border-radius: 3px;
    padding:0 3px;
    border-color:#c7c9ce;
}
.textarea:hover{
    border:1px solid #0192db;
}
.required{
    display: block;
}
.demo-drawer-footer{
    position:fixed bottom;
    bottom:0;
    width: 100%;
    /* position: absolute; */
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
}
.page_style {
    margin-top: 10px;
    text-align: center;
    float: right;
}
::v-deep .ivu-form-label-left .ivu-form-item-label {
    text-align: left;
    font-size: 16px;
}
::v-deep textarea.ivu-input {
    border-color: #c7c9ce;
    color: #000;
}
::v-deep textarea.ivu-input:hover{
    border:1px solid #0192db;
}
</style>
